{% load i18n adminmedia %}
<div class="tab-pane" id="{{ inline_admin_formset.formset.prefix }}-group">
    
    {{ inline_admin_formset.formset.management_form }}
    {{ inline_admin_formset.formset.non_form_errors }} 
    
    {% for inline_admin_form in inline_admin_formset %}
        <div class="inline-related {% if forloop.last %} empty-form last-related {% else %} collapse inline-actived {% endif %} {% if inline_admin_form.form.errors %} {{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% endif %}-erros{% endif %}" 
             id="{{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
            <div class="breadcrumb">

                {% if forloop.last %}
                    {% blocktrans with inline_admin_formset.opts.verbose_name|lower as verbose_name %}New {{ verbose_name }}{% endblocktrans %}
                {% else %}
                    {% blocktrans with inline_admin_formset.opts.verbose_name as verbose_name %}{{ verbose_name }}{% endblocktrans %}
                {% endif %}
                : #{{ forloop.counter }}
                {% if not forloop.last %}
                    <a title="{% trans 'Delete image' %}" href="javascript:void(0)" class="btn btn-danger pull-right inline-removelink"><i class="icon-remove icon-white"></i>  </a>
                    <a title="{% trans 'Minimize image' %}" data-target="#{{ inline_admin_formset.formset.prefix }}-{{ forloop.counter0 }}" data-toggle="collapse" href="#" class="btn btn-primary pull-right"><i class=" icon-chevron-down icon-white"></i>  </a>
                    {% if inline_admin_formset.formset.can_delete and inline_admin_form.original %}<span class="delete">{{ inline_admin_form.deletion_field.field }} {{ inline_admin_form.deletion_field.label_tag }}</span>{% endif %}
                {% endif %}
            </div>
          {% if inline_admin_form.form.non_field_errors %}{{ inline_admin_form.form.non_field_errors }}{% endif %}
          {% for fieldset in inline_admin_form %}
            {% include "admin/includes/fieldset.html" %}
          {% endfor %}
          {% if inline_admin_form.has_auto_field %}{{ inline_admin_form.pk_field.field }}{% endif %}
          {{ inline_admin_form.fk_field.field }}
        </div>
    {% endfor %}

    {% for inline_admin_form in inline_admin_formset %}

        {% if forloop.first %}
            <ul class="thumbnails" >
        {% endif %}

        {% for fieldset in inline_admin_form %}
            {% include "admin/photos/photo/includes/fieldset-image.html" %}
        {% endfor %}

        {% if forloop.last %}
            </ul>
        {% endif %}

    {% endfor %}
    
</div>
<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        // init bootstrap-toltip.js for imgs
        $('#{{ inline_admin_formset.formset.prefix }}-group').tooltip({
            selector: "[rel=tooltip]",
            container: 'body'

        });
        
        var rows = "#{{ inline_admin_formset.formset.prefix }}-group .inline-related";

        var updateInlineLabel = function(row) {
            $(rows).find(".inline_label").each(function(i) {
                var count = i + 1;
                $(this).html($(this).html().replace(/(#\d+)/g, "#" + count));
            });
        }
        var reinitDateTimeShortCuts = function() {
            // Reinitialize the calendar and clock widgets by force, yuck.
            if (typeof DateTimeShortcuts != "undefined") {
                $(".datetimeshortcuts").remove();
                DateTimeShortcuts.init();
            }
        }
        var updateSelectFilter = function() {
            // If any SelectFilter widgets were added, instantiate a new instance.
            if (typeof SelectFilter != "undefined"){
                $(".selectfilter").each(function(index, value){
                  var namearr = value.name.split('-');
                  SelectFilter.init(value.id, namearr[namearr.length-1], false, "{% admin_media_prefix %}");
                });
                $(".selectfilterstacked").each(function(index, value){
                  var namearr = value.name.split('-');
                  SelectFilter.init(value.id, namearr[namearr.length-1], true, "{% admin_media_prefix %}");
                });
            }
        }
        var initPrepopulatedFields = function(row) {
            row.find('.prepopulated_field').each(function() {
                var field = $(this);
                var input = field.find('input, select, textarea');
                var dependency_list = input.data('dependency_list') || [];
                var dependencies = [];
                $.each(dependency_list, function(i, field_name) {
                  dependencies.push('#' + row.find(field_name).find('input, select, textarea').attr('id'));
                });
                if (dependencies.length) {
                    input.prepopulatecustom(dependencies, input.attr('maxlength'));
                }
            });
        }

        var initWithErrors = function(row) {
            var fieldsets_group='#{{ inline_admin_formset.formset.prefix }}-group'
            var id_regex= new RegExp("(" + "{{ inline_admin_formset.formset.prefix }}" + "-(\\d+))-erros");
            $(fieldsets_group).find('.inline-related').each(function(i) {
                if ($(this).attr('class').match(id_regex)) {
                    $(this).addClass('in');
                }
            });
        }

        var click2Delete = function(row) {
            $(rows).find('.inline-removelink').click(function(){
                // Check input to delete objects.
                var input = $(this).parent().find('input');
                if ( $(this).hasClass('active') && input.prop('checked') ) {
                    $(this).find('i').removeClass('icon-ok').addClass('icon-remove');
                    $(this).removeClass('active');
                    input.prop('checked',false)
                    return 
                }
                input.prop('checked', true);
                $(this).addClass('active');
                $(this).find('i').removeClass('icon-remove').addClass('icon-ok');
            });
        }

        var init = function(row){
            $('.thumbnails li').on('click',function(e){
                if (! $(e.currentTarget).hasClass('add-row')) {
                    //Close all open edited forms inline when add one.
                    $('#{{ inline_admin_formset.formset.prefix }}-group')
                    .find('.in').collapse('hide');

                    // Close all added forms inline when edit one.
                    $('#{{ inline_admin_formset.formset.prefix }}-group')
                    .find('.dynamic-{{ inline_admin_formset.formset.prefix }}')
                    .each(function(d){
                        //if is not template empty form
                        if ($(this).attr('id') != undefined) {
                            $(this).find('a.inline-deletelink')
                            .each(function(){
                                $(this).trigger('click');
                            }) 
                        }
                    });
                    return true;
                }
            })
        }

        $(rows).formset({
            prefix: "{{ inline_admin_formset.formset.prefix }}",
            //addText: "{% blocktrans with inline_admin_formset.opts.verbose_name|title as verbose_name %} {{ verbose_name }}{% endblocktrans %}",
            formCssClass: "dynamic-{{ inline_admin_formset.formset.prefix }}",
            deleteCssClass: "inline-deletelink",
            deleteText: " ",
            emptyCssClass: "empty-form",
            removed: updateInlineLabel,
            addButtonCreate: false,
            added: (function(row) {
                initPrepopulatedFields(row);
                reinitDateTimeShortCuts();
                updateSelectFilter();
                updateInlineLabel(row);
            }),
            inited: (function(row){
                initWithErrors(row);
                init(row);
                click2Delete(row);
            }),
        })

    }); 
})(jQuery);
</script>

